<template>
  <div class="main">
    <a href="javascript:void(0)" @click="show">添加商品</a>
    <div class="title">
      <span class="name">商品信息</span>
      <span class="price">单价</span>
      <span class="num">数量</span>
      <span class="action">操作</span>
    </div>
    <div class="goods" v-for="(item,index) in list" :key="index">
      <span class="name">
					<img :src="item.img">
					{{item.name}}
				</span>
      <span class="price">{{item.price}}</span>
      <span class="num">
				{{item.num}}
				</span>
      <span class="action">
          <a href="javascript:void(0)" @click="del(index)">删除</a>
      </span>
    </div>
  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex'
  export default {
    computed: {
      ...mapState([
              'list'//this.list映射为this.$store.state.list
      ])
    },
    methods: {
      ...mapActions([
          'delAction'//this.delAction()映射为this.$store.dispatch('delAction')
      ]),
      show: function () {
        this.$router.push({name:'add'});//跳转到添加商品页面
      },
      del: function (index) {
          this.delAction(index);//执行方法
      }
    }
  }

</script>
<style src="@/assets/css/style.css" scoped></style>
